<template>
	<view>
		
		<!-- <u-navbar title="搜索结果" @leftClick="backPage" :autoBack="false" :placeholder="true" leftIconColor="#ffffff" :titleStyle="{color: '#ffffff'}" bgColor="#e60000" class="navBarHeight" /> -->

		<view class="header-bg bg-white">
			<u-search v-model="searchValue" @search="searchConfirm" :showAction="false" searchIconColor="#787878" height="80rpx" class="bg-white" borderColor="#787878" placeholder="搜新闻" />
		</view>

		<!-- 内容 -->
		<view class="p-20 border-box">
			<view v-for="(item,index) in articleList" :key="index">
				<!-- 文本 -->
				<view class="contentBox w-100 b-r-10 p-20 m-b-10" v-if="item.newsType == 'text'">
					<view class="color-b font-16 font-b" @click="toDetail(item)">{{ item.title }}</view>
					<view class="w-30 flex justify-between m-t-5 color-gray font-12">
						<view>{{item.authorName}}</view>
						<view>{{item.browseCount}}浏览</view>
					</view>
				</view>
				<!-- 视频 -->
				<view class="bg-white w-100 b-r-10 p-20 m-b-10" v-if="item.newsType == 'video'">
					<view class="color-b font-16 font-b" @click="toDetail(item)">{{ item.title }}</view>
					<view class="w-100 m-t-10">
						<video :id="'video'+index" class="w-100 videoBox b-r-10" @play="seeVideo(item,index)" :src="item.video" :poster="item.videoPoster" />
					</view>
					<view class="w-30 flex justify-between m-t-5 color-gray font-12">
						<view>{{item.authorName}}</view>
						<view>{{item.browseCount}}浏览</view>
					</view>
				</view>
				<!-- 文章 -->
				<view class="bg-white w-100 b-r-10 p-20 m-b-10" v-if="item.newsType == 'article'">
					<view class="color-b font-16 font-b" @click="toDetail(item)">{{ item.title }}</view>
					<view class="w-100 m-t-10 flex" v-if="item.coverUrls.length>1">
						<image class="imgAll imgBox b-r-10" v-for="(item,index) in item.coverUrls" :key="index" :src="item" />
					</view>
					<view class="w-100 m-t-10 flex" v-else-if="item.coverUrls.length===1">
						<image class="w-100 b-r-10" :src="item.coverUrls[0]" mode="widthFix" />
					</view>
					<view class="w-30 flex justify-between m-t-5 color-gray font-12">
						<view>{{item.authorName}}</view>
						<view>{{item.browseCount}}浏览</view>
					</view>
				</view>
			</view>
			<!-- 空数据 -->
			<empty text="暂无数据" :show="articleList.length == 0" />
		</view>
	</view>

</template>

<script>
	import { getNewsList,searchNewsDetail } from '@/common/api/news.js';
	export default {
		data() {
			return {
				searchValue: null,
				articleList: [],
				total: null,
				queryParmasArticle:{
					pageNo: 1,
					pageSize: 10,
					title: null,
					classId: null
				},
				articleList:[]
			};
		},
		onLoad(options){
			this.searchValue = options.keyword || '';
			this.queryParmasArticle.title = options.keyword || '';
			this.queryParmasArticle.pageNo = 1
			this.getDataList()
		},
		// 刷新
		onPullDownRefresh() {
			this.articleList = []
			this.queryParmasArticle.pageNo = 1
			this.getDataList()
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom() {
			if(this.articleList.length >= this.total){
				return
			}else{
				this.queryParmasArticle.pageNo++
				this.getNewsListData()
			}
		},
		mounted(){
			uni.$on('loadPage',()=>{
				this.getNewsListData()
			})
		},
		methods: {
			seeVideo(data,index){
				this.videoContext.forEach((item,inx) => {
					if(index !== inx){
						this.videoContext[inx].pause()
					}
				})
				searchNewsDetail(data.newsId).then(res => {
					this.getNewsListData()
				})
			},
			// backPage(){
			// 	uni.navigateBack()
			// },
			getDataList(){
				getNewsList(this.queryParmasArticle).then(res => {
					if(res.code === 200){
						if(res.data.length){
							res.data.forEach(item => {
								item.coverUrls = item.coverUrls?.split(',')||[];
							})
						}
						if(this.queryParmasArticle.pageNo === 1){
							this.articleList = res.data
						}else{
							this.articleList = this.articleList.concat(res.data)
						}
						// 初始化视频
						this.videoContext = [];
						this.createVideo()
						this.total = res.extend.total
					}
				})
			},
			// 创建video实例
			createVideo(){
				this.articleList.forEach((item,index) => {
					this.videoContext.push(uni.createVideoContext('video'+index));//创建视频实例指向video
				})
			},
			// 搜索
			searchConfirm(){
				this.queryParmasArticle.title = this.searchValue;
				this.articleList = []
				this.queryParmasArticle.pageNo = 1
				this.getDataList()
			},
			// 详情
			toDetail(data){
				if(data.newsType === 'video'){
					return
				}
				uni.navigateTo({
					url: '/pages/news/detail?id='+data.newsId
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
page{
	//background: #F2F2F2;
	background: #FFF;
	min-height: 100vh;
}
.videoBox{
	width:670rpx;
	height: 384rpx;
}
.header-bg {
  padding: 2% 4%;
  box-sizing: border-box;
}
.contentBox{
	background: linear-gradient(90deg, #FFE2E2, #FFFEFE);
}
.imgBox{
	width: 230rpx;
	height: 230rpx;
	margin-right: 30rpx;
}
.imgBox:nth-child(3n+3){
	margin-right: 0;
}
::v-deep .u-search__content{
	background-color: #ffffff !important;
}
::v-deep .u-search__content__input{
	background-color: #ffffff !important;
}
</style>